<template>
  <div class="playlist app-container">
    <keep-alive>
      <PlayList :key="componentsKey" @open="openActionSheet" ref="PlayList" />
    </keep-alive>

    <action-sheet v-model="showModal" @modal="closeActionSheet">
      <div class="info" v-if="Song">
        <img class="image" v-lazy="Song.image + '?param=800x0'">
        <div class="content">
          <div class="name">歌曲： {{Song.name}}</div>
          <div class="singers">{{singersText}}</div>
        </div>
      </div>
      <ul class="menu">
        <menu-item
          icon="huanyuangequxinxi"
          text="下一首播放"
          @click.native="selectMenu('下一首播放')"
        />
        <menu-item
          icon="shoucangdaogedan"
          text="收藏到歌单"
          @click.native="selectMenu('收藏到歌单')"
        />
        <menu-item
          icon="fenxiang"
          text="分享"
          @click.native="selectMenu('分享')"
        />
        <menu-item
          icon="pinglun"
          text="评论"
          @click.native="selectMenu('评论')"
        />
        <menu-item
          icon="geshou"
          :text="'歌手：' + singersText"
          @click.native="selectMenu('歌手')"
        />
        <menu-item
          v-if="currentSong.al"
          icon="zhuanji"
          :text="'专辑：' + currentSong.al.name"
          @click.native="selectMenu('专辑')"
        />
      </ul>
      <div v-if="showPlayer" class="player-height" />
    </action-sheet>

    <select-singer v-model="showSinger" @select="selectSinger" @modal="closeSingers" :singers="singers" />

    <select-play-list v-model="showPlayList" @select="addPlayList" />
  </div>
</template>

<script>
import { PlayListTracksAsync } from 'api/playlist'
import { GetSongDetailsAsync } from 'api/song'
import PlayList from './PlayList'
import MenuItem from './components/menu-item'
import ActionSheet from 'components/action-sheet'
import selectSinger from 'components/selectSinger'
import selectPlayList from 'components/selectPlayList'

export default {
  name: 'play-list',
  data () {
    return {
      showModal: false,
      showSinger: false,
      showPlayList: false,
      Song: null,
      currentSong: {}
    }
  },
  mounted () {
    if (!this.$store.state.Disc.id) this.$router.replace('/recommend')
  },
  methods: {
    selectMenu (type) {
      switch (type) {
        case '下一首播放':
          if (this.Song) this.$store.dispatch('player/addOneSong', this.Song)
          break
        case '收藏到歌单':
          this.showPlayList = true
          break
        case '分享':
          this.$copy('https://music.163.com/song?id=' + this.Song.id)
          break
        case '评论':
          this.$router.push({
            path: '/comment',
            query: {
              type: 1,
              id: this.Song.id
            }
          })
          break
        case '歌手':
          this.showModal = false
          this.showSinger = true
          break
        case '专辑':
          break
      }
    },
    openActionSheet (song) {
      this.showModal = true
      this.Song = song
      this.currentSong = Object.assign({}, song)
      GetSongDetailsAsync([song.id]).then(songs => {
        if (songs.length) {
          this.currentSong = Object.assign({}, this.currentSong, songs[0])
        }
      }).then(() => {
      })
    },
    closeActionSheet () {
      this.showModal = false
      this.Song = null
    },
    closeSingers () {
      this.showSinger = false
      this.showModal = false
      setTimeout(() => {
        this.Song = null
      }, 300)
    },
    selectSinger (singer) {
      console.log(singer)
      this.closeSingers()
      this.$router.push({
        name: 'search',
        params: { query: singer.name }
      })
    },
    addPlayList (playlist) {
      PlayListTracksAsync({op: 'add', pid: playlist.id, tracks: this.Song.id}).then(res => {
        this.$toast.success('已添加到歌单')
      }).catch(err => {
        if (typeof err === 'string') {
          this.$toast.fail(err)
        }
      })
      this.showPlayList = false
    }
  },
  computed: {
    componentsKey () {
      return `${this.$store.state.Disc.type}-${this.$store.state.Disc.id}`
    },
    showPlayer () {
      return !!this.$store.state.player.playList.length
    },
    singers () {
      return this.Song ? this.Song.singer : []
    },
    singersText () {
      return this.singers.map(item => item.name).join('/')
    }
  },
  components: { PlayList, ActionSheet, MenuItem, selectSinger, selectPlayList }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .playlist {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .info {
    width: 100%;
    display: flex;
    border-bottom: 1px solid @color-line;
    padding-bottom: 12px;
    .image {
      width: 48px;
      height: 48px;
      border-radius: 8px;
    }
    .content {
      padding-left: 15px;
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: center;
      text-align: left;
      .name, .singers {
        flex: 1;
        line-height: 24px;
      }
    }

  }

  .player-height {
    height: @player-mini-height;
  }
</style>
